<!-- 切换统计项 -->
<template>
  <div class="change_statist_charts">
    <dt-modal-edit ref='edit' :title='title' :label-width='130' okText='确定' cancelText='取消'
      :width='30' @ok='onOk' class="dt_modal_edit">
      <Row class="label_warp">
        <Col span="24" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        您可选择其他统计项，并查看相应的图表数据
        </Col>
      </Row>
      <ul>
        <li :class="['item',checkStatus==item.key?'selected':'']" v-for="(item,index) in list"
          :key="index">
          <span>{{item.label}}</span>
          <Button :class="checkStatus==item.key?'selected':''" type="text"
            @click="handelClick(item,index)">选择</Button>
        </li>
      </ul>
    </dt-modal-edit>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '切换统计项',
        list: [
          { label: 'PK数据', disabled: false, key: 1 },
          { label: '客户统计', disabled: false, key: 2 },
          { label: '渠道统计', disabled: false, key: 3 },
          { label: '销售统计', disabled: false, key: 4 },
        ],
        checkStatus: '',
        templateAllList: []
      }
    },
    methods: {
      show(data) {
        this.checkStatus = data.type
        this.$refs.edit.show()
      },
      hide() {
        this.$refs.edit.hide()
      },
      handelClick(item, index) {
        this.checkStatus = item.key
      },
      onOk() {
        this.$emit('success', { type: this.checkStatus })
        this.hide()
      }
    }
  }
</script>
<style lang='scss' scoped>
  .change_statist_charts {
    .label_warp {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 0 10px;

      .tips {
        line-height: 32px;
        font-size: 14px;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .selected {
      color: #0088ff;
    }

    .item {
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
    }
  }
</style>